<template>
  <div class="violation-table">
    <superslide
      :options="options"
      class="violation-table-marquee-top"
      v-if="dataList.length"
    >
      <div class="list">
        <ul @mouseover="onMouseoverActive" @mouseleave="onMouseleave">
          <template v-for="(item, index) in dataList">
            <li
              :class="[
                'list-item',
                activeType == item.id ? 'list-item-active' : ''
              ]"
              :key="index"
              @click="handleClick(item)"
            >
              <div class="list-item__num item-width">
                <span class="list-item__num-round">
                  <span class="list-item__num-round-mini"></span>
                </span>
                <span class="list-item__num-name">{{
                  "NO." + (index + 1)
                }}</span>
              </div>
              <div class="list-item__area item-width" :title="item.area">
                {{ item.area }}
              </div>
              <div class="list-item__count item-width">
                <span>{{ item.count }}</span>
                亩
              </div>
              <div class="list-item__house item-width">
                <span>{{ item.houseNum }}</span>
                户
              </div>
            </li>
          </template>
        </ul>
      </div>
      <div class="list-on" id="ViolationTableListOn" v-show="false">
        <ul></ul>
      </div>
    </superslide>
  </div>
</template>

<script>
export default {
  name: "ViolationTable",
  components: {},
  filters: {},
  props: ["dataList"],
  data() {
    return {
      timer: null,
      options: {
        titCell: ".list-on ul",
        mainCell: ".list ul",
        autoPage: true,
        effect: "top",
        autoPlay: true,
        vis: 2,
        interTime: 5000,
        delayTime: 500,
        easing: "swing"
      },
      activeType: "160"
    };
  },
  computed: {},
  watch: {
    dataList: {
      handler() {
        this.showActive();
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  },
  methods: {
    onMouseoverActive() {
      clearTimeout(this.timer);
      this.timer = null;
    },
    onMouseleave() {
      setTimeout(() => {
        this.showActive();
      }, 5000);
    },
    showActive() {
      let on = document.getElementById("ViolationTableListOn");
      const { dataList } = this;
      if (on) {
        let _on = on.querySelector(".on");
        const _data = dataList[Number(_on.innerHTML)];
        if (_data) {
          this.activeType = _data.id;
          this.$emit("on-back", _data.id);
        } else {
          this.activeType = dataList[0].id;
          this.$emit("on-back", dataList[0].id);
        }
      } else {
        this.activeType = dataList[0].id;
        this.$emit("on-back", dataList[0].id);
      }
      this.timer = setTimeout(() => {
        this.showActive();
      }, 5000);
    },
    handleClick(val) {
      this.activeType = val.id;
      this.$emit("on-back", val.id);
    }
  }
};
</script>

<style lang="less">
@listHeight: 31.5vh;
/*滚动插件样式*/
.violation-table-marquee-top {
  width: 380px;
  overflow: hidden;
  position: relative;
  .list {
    overflow: hidden;
    height: @listHeight;
  }
  .list-on ul li.on {
    background: #f00;
  }
  .tempWrap {
    height: @listHeight !important;
  }
}
.violation-table {
  padding-top: 15px;
  box-sizing: border-box;
  min-height: @listHeight;
  .list {
    &-item {
      cursor: pointer;
      box-sizing: border-box;
      border-right: 6px solid #0261e9;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      background-image: linear-gradient(
        270deg,
        rgba(0, 191, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      height: 38px;
      margin-bottom: 10px;
      .item-width {
        width: 24%;
      }
      &__num {
        font-family: antonio;
        color: #3b86ee;
        font-size: 16px;
        width: 21% !important;
        text-align: left;
        &-round {
          margin-right: 4px;
          display: inline-block;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: rgba(59, 134, 238, 0.22);
          position: relative;
          top: 4px;

          &-mini {
            position: absolute;
            top: 4px;
            left: 4px;
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #3b86ee;
            z-index: 20;
            &::after {
              position: absolute;
              content: "";
              top: 18px;
              left: 6px;
              height: 34px;
              border: 1px solid rgba(255, 255, 255, 0.1);
              z-index: 20;
            }
          }
        }
        &-name {
        }
      }
      &__area {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &__count {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0;
        text-align: center;
        > span {
          font-family: antonio-bold;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: center;
        }
      }
      &__house {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0;
        text-align: center;
        > span {
          font-family: antonio-bold;
          font-size: 20px;
          color: #ffffff;
          letter-spacing: 1px;
          text-align: center;
        }
      }
    }
  }
  .list {
    &-item:last-child {
      .list-item__num-round-mini::after {
        border: none;
      }
    }
  }
  .list-item-active {
    background-image: linear-gradient(
      270deg,
      rgba(193, 230, 26, 0.35) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    border-right: 6px solid #c1e61a;
    .list-item__num-round {
      background: rgba(193, 230, 26, 0.22);
    }
    .list-item__num-round-mini {
      background: #c1e61a;
    }
  }
}
</style>
